import DetailTitle from './DetailTitle';
import DetailItem from './DetailItem';
import PropTypes from '../_util/vue-types';

export default {
  name: 'CDetail',
  props: {
    /**
     * default: 行间距及容器的padding稍大，但是行高较小。示例：管理端待处理发票详情
     * small  : 行间距及容器的padding稍小，但是行高较大。示例：管理端订单详情
     * 和itemContent的背景色无关
     */
    type: PropTypes.oneOf(['default', 'small']).def('default'),

    /**
     * [ //详情卡片的集合
     *   {
     *     title: '顶部title',                    //顶部title
     *     span: 8,                              //每一个item所占的百分比，24为百分百
     *     gutter: 20,                           //item之间的间隔
     *     hasNoBg: true,                        //itemContent是否有背景色，true: 没有
     *     labelStyle: { width: '124px' },       //itemLabel的样式
     *     titleSlot: 'titleSlot',               //插槽，完全覆盖title内容
     *     titleSuffix: 'titleSuffix',           //插槽，在title后面追加内容
     *     contentList: [                        //item的集合
     *       {
     *         label: 'labelText',               //itemLabel的文字
     *         fieldName: 'fieldName',           //itemContent的字段名，和detailInfo对应
     *         slotName: 'slotName',             //插槽，替换itemContent内容区
     *         span: 8,                          //同上，会覆盖上面的值
     *         hasNoBg: true,                    //同上，会覆盖上面的值
     *         labelStyle: { width: '124px' },   //同上，会覆盖上面的值
     *         type: 'badge',                    //[ 'default', 'tag', 'badge' ]其中的一个，也可以不写（与default相同）
     *         badgeMap: [                       //对应type: badge
     *           {
     *             text: '文本',
     *             status: 'success',            //[ 'success', 'processing', 'error', 'warning', 'default' ]其中的一个，见mixin.less
     *           },
     *         ],
     *         tagMap: [                         //对应type: tag
     *           {
     *             text: '文本',
     *             className: 'blueBorder'       //[ 'blue', 'green', 'red', 'blueBorder', 'greenBorder', 'redBorder' ]其中的一个，见mixin.less
     *           }
     *         ],
     *         isShow: () => {                   //一定要写成箭头函数，此时函数的this指向父组件
     *           return Boolean;
     *         },
     *         isKeeper: true,                   //占位的标识，一般情况下单独使用，适用于每行分N份，但实际item的个数小于N，实例见管理端待处理发票详情
     *       }
     *     ]
     *   }
     * ]
     */
    detailList: PropTypes.array.isRequired,
    /**
     * 对应detailList中fieldName的取值
     */
    detailInfo: PropTypes.object.isRequired,
  },
  render(h) {
    let {
      type,
      detailInfo,
      detailList,

      $scopedSlots,
    } = this;
    return (
      <div class={`custom-detail ${type === 'small' ? 'custom-detail-small' : ''}`}>
        {detailList.map(itemDetail => {
          return [
            <DetailTitle itemDetail={itemDetail} customSlots={$scopedSlots} />,

            <DetailItem
              itemDetail={itemDetail}
              type={type}
              detailInfo={detailInfo}
              customSlots={$scopedSlots}
            />,
          ];
        })}
      </div>
    );
  },
};
